import React from 'react';
import { Link } from 'react-router-dom';
import ClassNames from 'classnames';
import dayJs from 'dayjs';
import { useRequest, useSafeState } from 'ahooks';
import { getLiveList } from '@/service/live';
import { enumLiveTypeTextToId } from '@/common/enum';
import Image from '@/components/Image';
import RenderJudge from '@/components/RenderJudge';
import DefaultUserImage from '@/assets/images/default_user_image.png';
import DefaultLiveCoverImage from '@/assets/images/default_live_cover_image.jpg';
import FootballPlayIcon from '@/assets/images/football_play_icon.png';
import BasketballPlayIcon from '@/assets/images/basketball_play_icon.png';
import DefaultPlayIcon from '@/assets/images/default_play_icon.png';
import LiveRecommendIcon from '@/assets/images/live_recommend_icon.png';

import styles from '../style/Recommend.scss';

const Recommend = ({ offLineTime, title, userImage, leagueName }) => {
  const [list, setList] = useSafeState([]);

  const { loading } = useRequest(
    getLiveList,
    {
      onSuccess: (d) => setList((d || []).slice(0, 3)),
      defaultLoading: true,
    },
  );

  const getLivePlayIcon = (sportType) => {
    if (/^1$/.test(sportType)) return FootballPlayIcon;
    if (/^2$/.test(sportType)) return BasketballPlayIcon;

    return DefaultPlayIcon;
  };

  if (loading) return null;
  return (
    <div className={styles.container}>
      <div className={styles.userInfos}>
        <Image className={styles.userImage} src={userImage} defaultImage={DefaultUserImage} />
        <div className={styles.infoBox}>
          <div className={ClassNames(styles.info, styles.isBig)}>该直播已结束，主播已下播</div>
          <RenderJudge
            value={offLineTime}
            active={(
              <div className={styles.info}>{dayJs(offLineTime).format('YYYY-MM-DD HH:mm')}</div>
            )}
          />
          <RenderJudge
            value={leagueName}
            active={(
              <div className={styles.info}>{`直播了【${leagueName}】${title}`}</div>
            )}
            inactive={(
              <div className={styles.info}>{`直播了 ${title}`}</div>
            )}
          />
        </div>
      </div>
      <RenderJudge
        value={list.length}
        active={(
          <>
            <div className={styles.title}>看看其他主播</div>
            <div className={styles.list}>
              {list.map((row, index) => (
                <Link className={styles.listItem} to={`/live/room/${row.roomId}`} key={index}>
                  <div className={styles.coverImage}>
                    <Image
                      className={styles.coverImageInner}
                      src={row.liveImg}
                      defaultImage={DefaultLiveCoverImage}
                    />
                    <RenderJudge
                      value={row.liveStatus === 1}
                      active={(
                        <img className={styles.playStatus} src={getLivePlayIcon(enumLiveTypeTextToId[row.liveType] || 0)} />
                      )}
                    />
                    <RenderJudge
                      value={row.isRecommend === 1}
                      active={(
                        <img className={styles.recommendIcon} src={LiveRecommendIcon} />
                      )}
                    />
                  </div>
                  <div className={styles.listTitle}>{row.liveTitle}</div>
                </Link>
              ))}
            </div>
          </>
        )}
      />
    </div>
  );
};

Recommend.defaultProps = {
  // 默认足球
  // sportId: 1,
};

export default Recommend;
